<template>
  <div>
      <table>
        <tr is="MyTr"
        v-for="(item,index) in goodsArr"
        :key="index"
        :obj="item"
        :index="index"
        ></tr>
      </table>
      <!-- 计算属性 -->
      <p>All Number: <span class="sum">{{sumCount}}</span></p>
  </div>
</template>

<script>
import MyTr from './components/MyTr'
export default {
  components:{
    MyTr
  },
    data(){
      return{
        goodsArr: [
    {
        count: 0,
        goodsName: "Watermelon"
    }, {
        count: 0,
        goodsName: "Banana"
    }, {
        count: 0,
        goodsName: "Orange"
    }, {
        count: 0,
        goodsName: "Pineapple"
    }, {
        count: 0,
        goodsName: "Strawberry"
    }
]
      }
    },
    computed:{
      sumCount(){
        return this.goodsArr.reduce((sum,obj)=>sum +=obj.count*1,0)
      }
    }
}
</script>

<style>
  .sum {
    color: red;
  }
</style>